<template>
  <a-modal
    title="新建消息"
    style="top: 20px;"
    :width="900"
    v-model="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <a-form :form="form">
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="接收人"
      >
        <a-row :gutter="16">
          <a-col :span="20">
            <a-select mode="multiple" :showArrow="false" v-decorator="['users']">
              <div slot="dropdownRender"></div>
            </a-select>
          </a-col>
          <a-col :span="4"><a-button type="primary" @click="choseUserList">选择</a-button></a-col>
        </a-row>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="接收角色"
      >
        <a-row :gutter="16">
          <a-col :span="20">
            <a-select mode="multiple" :options="roleOptions" :showArrow="false" v-decorator="['roles']">
              <div slot="dropdownRender"></div>
            </a-select>
          </a-col>
          <a-col :span="4"><a-button type="primary" @click="choseRoleList">选择</a-button></a-col>
        </a-row>

      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="标题"
      >
        <a-input v-decorator="['subject',{rules: [{ required: true, message: '标题不能为空' }]}]"/>
      </a-form-item>

      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="内容"
      >
        <!-- <a-textarea v-decorator="['memo']" :rows="8" /> -->
        <wang-editor @change="()=>{}" v-decorator="['content', { rules: [{ required: true, message: '内容不能为空' }] }]" v-if="visible"/>
      </a-form-item>

    </a-form>

    <message-role-list ref="roleList" @ok="roleListCallback"/>
    <message-user-list ref="userList" @ok="userListCallback"/>
  </a-modal>
</template>

<script>
import WangEditor from '@/components/Editor/WangEditor'
import MessageRoleList from '@/components/MessageNotice/MessageRoleList'
import MessageUserList from '@/components/MessageNotice/MessageUserList'
import { addMessage } from '@/api/system'
export default {
  components: {
    WangEditor,
    MessageRoleList,
    MessageUserList
  },
  data () {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      roles: [],
      roleCodes: [],
      roleOptions: [],
      useNames: [],
      userOptions: []
    }
  },
  methods: {
    add () {
      this.visible = true
      this.form.resetFields()
      this.initOption()
    },
    initOption () {
      this.roles = []
      this.roleCodes = []
      this.roleOptions = []
      this.useNames = []
      this.userOptions = []
    },
    choseRoleList () {
      const roleCodes = this.form.getFieldValue('roles')
      const roles = this.roles.filter(role => {
        return roleCodes.indexOf(role.roleCode) > -1
      })
      this.$refs.roleList.open(roleCodes, roles)
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          addMessage({
            toUser: values.users ? values.users.join() : '',
            toRole: values.roles ? values.roles.join() : '',
            subject: values.subject ? values.subject : '',
            content: values.content ? values.content : ''
          }).then(res => {
            if (res.status === 1) {
              this.$message.success(res.message)
               this.form.resetFields()
               this.initOption()
               this.visible = false
               this.$emit('ok')
            } else {
            this.$message.error(res.res.message)
            }
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    roleListCallback (roles) {
      this.roles = roles
      this.roleOptions = []
      if (roles) {
          roles.forEach(element => {
            this.roleOptions.push({
              key: element.roleCode,
              value: element.roleCode,
              title: element.roleName
            })
          })
      }

      this.roleCodes = roles ? roles.map(data => data.roleCode) : []
      this.form.setFieldsValue({ 'roles': this.roleCodes || [] })
    },
    choseUserList () {
      const useNames = this.form.getFieldValue('users')
      this.$refs.userList.open(useNames)
    },
    userListCallback (useNames) {
      this.useNames = useNames
      this.form.setFieldsValue({ 'users': useNames || [] })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .w-e-toolbar {
  flex-wrap: wrap;
}
</style>
